<template>
  <div class="main">
    <!--    <van-sticky>-->
    <div class="nav">
      <img class="back" :src="back" alt="" @click="handleBack"/>
      <img class="share" :src="share" alt="" @click="handleShare"/>
    </div>
    <div class="header">
      <div class="header-l">
        <div class="num">BMI(体脂指数)：{{ userInfo.bmi ? userInfo.bmi : '暂无' }}</div>
        <div class="name">{{ userInfo.name ? userInfo.name : '暂无' }}</div>
        <div class="age">{{ userInfo.sexName ? userInfo.sexName : '暂无' }} {{
            userInfo.age ? userInfo.age : '0'
          }}岁
        </div>
      </div>
      <div style=" border: 1px solid #fff;" class="avatar" :style="{backgroundImage: `url(${userInfo.avatar ?  store.state.imgUrl+userInfo.avatar : logo})`}">
      </div>
      <!--      store.state.imgUrl +-->
      <!-- <van-image
          width="75"
          height="75"
          style=" border: 1px solid #fff;"
          round
          :src="userInfo.avatar ?  store.state.imgUrl+userInfo.avatar : logo"
      /> -->
    </div>
    <div class="standard">
      <div class="standard-item blue" v-if="userInfo.bmi<18.5">
        <img src="../../../assets/my/health-records/gq.png"/>
      </div>
      <div class="standard-item green" v-if="userInfo.bmi>18.5 && userInfo.bmi<24.9">
        <img src="../../../assets/my/health-records/zc.png"/>
      </div>
      <div class="standard-item yello" v-if="userInfo.bmi>25 && userInfo.bmi<29.9">
        <img src="../../../assets/my/health-records/cz.png"/>
      </div>
      <div class="standard-item red" v-if="userInfo.bmi>30">
        <img src="../../../assets/my/health-records/fp.png"/>
      </div>
    </div>
    <!--    </van-sticky>-->

    <div class="three" v-for="(item,index) in threeList" :key="index" v-if="item.name !=='运动和活动'">
      <div class="title">{{ item.name }}
        <img src="../../../assets/my/health-records/head_bgm.png">
      </div>
      <div class="three-item-all">
        <div class="three-item" v-for="(item1,index1) in item.list" :key="index1">
          <img v-if="item1.name=='身高'" :src="height"/>
          <img v-if="item1.name=='体重'" :src="weight"/>
          <img v-if="item1.name=='心率'" :src="xl"/>
          <img v-if="item1.name=='体温'" :src="tw"/>
          <img v-if="item1.name=='血氧'" :src="xy"/>
          <img v-if="item1.name=='高压'" :src="gy"/>
          <img v-if="item1.name=='低压'" :src="dy"/>
          <img v-if="item1.name=='肺功能'" :src="fgn"/>
          <img v-if="item1.name=='血糖'" :src="xt"/>
          <img v-if="item1.name=='尿酸'" :src="ns"/>
          <img v-if="item1.name=='糖化'" :src="thxhdb"/>
          <img v-if="item1.name=='总胆固醇'" :src="dgc"/>
          <div>{{ item1.name }}</div>
          <div>{{ item1.value || 0 }}{{ item1.unit }}</div>
        </div>
      </div>
    </div>
    <div class="three">
      <div class="title">家族遗传病史
        <img src="../../../assets/my/health-records/head_bgm.png">
      </div>
      <div class="three-item-all">
        <van-form>
          <van-cell title="有无家族遗传病史" is-link :value="editHealthRecond.isGeneticHistoryName"
                    @click="showJZS = true"/>
          <van-cell title="亲属关系" is-link :value="editHealthRecond.relationName" @click="showRelation=true"/>
          <!--        <van-field-->
          <!--            v-model="kinship"-->
          <!--            label="亲属关系"-->
          <!--            placeholder="请输入"-->
          <!--            input-align="right"-->
          <!--        />-->
          <!--        <van-cell title="疾病名称" is-link value="高血压"/>-->
          <van-field
              v-model="editHealthRecond.diseaseName"
              label="疾病名称"
              placeholder="请输入"
              input-align="right"
              @blur="save"
              :rules="[
              { pattern: /^.{2,60}$/, message: '疾病名称长度必须为2-50个字符'}
            ]"
          />
          <!--        { required: true, message: '请输入详细地址！',trigger: 'blur' },-->
          <!--            :rules="[{ validator, message: '疾病名称长度必须为2-50个字符' }]"-->
          <!--        <van-cell title="年龄" :value="editHealthRecond.age"/>-->
          <van-field
              v-model="editHealthRecond.age"
              label="年龄"
              placeholder="请输入"
              input-align="right"
              @blur="save"
              :rules="[{ pattern:/^((1[0-5])|[1-9])?\d$/, message: '请输入正确的年龄' }]"
          />
          <!--            :rules="[{ validator: validateAge }]"-->
          <!--        <van-cell title="出生日期" is-link value="95-09-24"/>-->
          <van-cell title="" value=""/>
        </van-form>
      </div>

      <div class="title">医疗记录
        <img src="../../../assets/my/health-records/head_bgm.png">
      </div>
      <div class="three-item-all">
        <van-cell title="医疗记录" is-link
                  :value='editHealthRecond.medicalRecord?editHealthRecond.medicalRecord.length:0' @click="gotoMedical"/>
        <van-cell title=""/>
        <!--        <div class="three-item">-->
        <!--          <img :src="item1.img">-->
        <!--          <div>{{ item1.name }}</div>-->
        <!--          <div>{{ item1.value }}{{ item1.unit }}</div>-->
        <!--        </div>-->
      </div>
      <!--    </div>-->
      <!--    <div class="three">-->
      <div class="title">生活习惯
        <img src="../../../assets/my/health-records/head_bgm.png">
      </div>
      <div class="three-item-all">
        <!--        <div class="three-item">-->
        <van-cell title="是否吸烟" is-link :value="editHealthRecond.smokingName" @click="showSmoking=true"/>
        <van-cell title="是否饮酒" is-link :value="editHealthRecond.drinkName" @click="showDrinking= true"/>
        <van-cell title="饮食习惯" is-link :value="editHealthRecond.ysxg" @click="gotoDietary"/>
        <van-cell title="运动习惯" is-link :value="editHealthRecond.exerciseName" @click="showSprot=true"/>
        <van-cell title="" value=""/>
        <!--          <img :src="item1.img">-->
        <!--          <div>{{ item1.name }}</div>-->
        <!--          <div>{{ item1.value }}{{ item1.unit }}</div>-->
        <!--        </div>-->
      </div>
    </div>
    <van-action-sheet v-model="showJZS" :actions="jzsActions" cancel-text="取消" @select="onSelectJzs"/>
    <van-action-sheet v-model="showRelation" :actions="relationList" cancel-text="取消"
                      @select="onSelectRelation"/>
    <van-action-sheet v-model="showSmoking" :actions="smokingActions" cancel-text="取消" @select="onSelectSmoking"/>
    <van-action-sheet v-model="showDrinking" :actions="drinkActions" cancel-text="取消" @select="onSelectDrinking"/>
    <van-action-sheet v-model="showSprot" :actions="sprotActions" cancel-text="取消" @select="onSelectSprot"/>

    <!--    </van-sticky>-->
  </div>
</template>

<script>
import {mapState} from "vuex";
import {
  getTestHealthData,
  queryHealthRecord,
  getFriendList,
  getSmokingList,
  getDrinkingList,
  getSprotList
} from "@/api/my";
import {saveHealthRecord} from "../../../api/my";
import store from '../../../store'

export default {
  name: "healthRecords",
  data() {
    return {
      store: store,
      showSprot: false,
      showDrinking: false,
      showSmoking: false,
      showRelation: false,
      showJZS: false,
      jzsActions: [{name: '有', value: 1}, {name: '无', value: 0}],
      relationList: [],
      smokingActions: [],
      drinkActions: [],
      sprotActions: [],//运动
      kinship: '',
      back: require("@/assets/search/back.png"),
      share: require("@/assets/my/share.png"),
      height: require('@/assets/my/health-records/slclsj/height.png'),
      weight: require('@/assets/my/health-records/slclsj/weight.png'),
      xl: require('@/assets/my/health-records/slclsj/xl.png'),
      tw: require('@/assets/my/health-records/slclsj/tw.png'),
      xy: require('@/assets/my/health-records/slclsj/xy.png'),
      gy: require('@/assets/my/health-records/slclsj/gy.png'),
      dy: require('@/assets/my/health-records/slclsj/dy.png'),
      fgn: require('@/assets/my/health-records/slclsj/fgn.png'),
      xt: require('@/assets/my/health-records/shzb/xt.png'),
      ns: require('@/assets/my/health-records/shzb/ns.png'),
      thxhdb: require('@/assets/my/health-records/shzb/thxhdb.png'),
      dgc: require('@/assets/my/health-records/shzb/dgc.png'),
      threeList: [{
        name: '生理测量数据',
        list: [
          {name: '身高', unit: 'CM', value: '0', img: require('@/assets/my/health-records/slclsj/height.png')},
          {name: '体重', unit: 'KG', value: '0', img: require('@/assets/my/health-records/slclsj/weight.png')},
          {name: '心率', unit: '次/分钟', value: '0', img: require('@/assets/my/health-records/slclsj/xl.png')},
          {name: '体温', unit: '℃', value: '0', img: require('@/assets/my/health-records/slclsj/tw.png')},
          {name: '血氧', unit: '%', value: '0', img: require('@/assets/my/health-records/slclsj/xy.png')},
          {name: '高压', unit: 'mmHg', value: '0', img: require('@/assets/my/health-records/slclsj/gy.png')},
          {name: '低压', unit: 'mmHg', value: '0', img: require('@/assets/my/health-records/slclsj/dy.png')},
          {name: '肺功能', unit: 'L', value: '0', img: require('@/assets/my/health-records/slclsj/fgn.png')},
        ]
      },
        {
          name: '生化指标',
          list: [
            {name: '血糖', unit: 'mmol/L', value: '0', img: require('@/assets/my/health-records/shzb/xt.png')},
            {name: '尿酸', unit: 'mg/dL', value: '0', img: require('@/assets/my/health-records/shzb/ns.png')},
            {name: '糖化血红蛋白', unit: '%', value: '0', img: require('@/assets/my/health-records/shzb/thxhdb.png')},
            {name: '总胆固醇', unit: 'umol/L', value: '0', img: require('@/assets/my/health-records/shzb/dgc.png')},
          ]
        },
        {
          name: '运动和活动',
          list: [
            {name: '今日步数', unit: '万/步', value: '0', img: require('@/assets/my/health-records/ydhd/jrbs.png')},
            {
              name: '今日运动时间',
              unit: '小时',
              value: '0',
              img: require('@/assets/my/health-records/ydhd/ydsj.png')
            },
            {name: '睡眠质量', unit: '', value: '暂无', img: require('@/assets/my/health-records/ydhd/smzl.png')},
          ]
        }
      ],
      healthRecondList: {},
      editHealthRecond: {
        isGeneticHistory: 0, //有无遗传史
        isGeneticHistoryName: '',
        relation: '', //亲友关系
        relationName: '',
        diseaseName: '', //疾病名称
        age: '', //年龄
        smokingType: '', //是否吸烟
        smokingName: "",
        drinkType: '',  //是否饮酒
        drinkName: '',
        dinnerType: '',//每日餐饮
        dinnerName: '',
        tasteType: '',//口味偏好
        tasteName: '',
        stapleFoodType: '',//主食偏好
        stapleFoodName: '',
        exerciseType: '',//运动习惯
        exerciseName: '',
        ysxg: '暂无',
      },
      logo: require("../../../assets/tx.png"),
      ageRules: [
        {required: true, message: '年龄不能为空'},
        {type: 'number', message: '年龄必须是数字'},
        {min: 2, max: 50, message: '年龄必须是2-50之间的数字'}
      ]
    }
  },
  computed: {
    ...mapState(['userInfo']),
  },
  created() {
    console.log('userInfo', this.userInfo)
    let message = {
      action: 'hiddenBottom',
      param: {}
    }
    getInfoFromVue.postMessage(JSON.stringify(message))
  }
  ,
  async mounted() {
    this.getHealthData()
    this.queryHealthRecord()
    //调用字典 获取关系 是否吸烟 性别
    let relations = await this.getRelation();//关系
    relations.forEach((item, index) => {
      let obj = {
        name: item.label,
        value: item.value
      }
      this.relationList.push(obj)
    })
    let smokings = await this.getSmoking();// 吸烟
    smokings.forEach((item, index) => {
      let obj = {
        name: item.label,
        value: item.value
      }
      this.smokingActions.push(obj)
    })
    let drinking = await this.getDrinking();// 吸烟
    drinking.forEach((item, index) => {
      let obj = {
        name: item.label,
        value: item.value
      }
      this.drinkActions.push(obj)
    })
    let sprots = await this.getSprots();// 吸烟
    sprots.forEach((item, index) => {
      let obj = {
        name: item.label,
        value: item.value
      }
      this.sprotActions.push(obj)
    })
  }
  ,
  methods: {
    weightP(v) {
      if (v) {
        return /^[0-9]+(\.[0-9]{1,2})?$/.test(v)
      } else {
        return /\s/
      }
    },
    validateAge(rule, value, callback) {
      if (!value) {
        callback(new Error('年龄不能为空'));
      } else if (isNaN(value)) {
        callback(new Error('年龄必须是数字'));
      } else if (value < 2 || value > 50) {
        callback(new Error('年龄必须是2-50之间的数字'));
      } else {
        callback();
      }
    },
    validator(val) {
      return /^.{2,50}$/.test(val);
    },
    async onSelectSmoking(item) {
      this.editHealthRecond.smokingName = item.name
      this.editHealthRecond.smokingType = item.value
      let res = await this.save()
      this.showSmoking = false
    }
    ,
    async onSelectDrinking(item) {
      this.editHealthRecond.drinkName = item.name
      this.editHealthRecond.drinkType = item.value
      let res = await this.save()
      this.showDrinking = false
    }
    ,
    async onSelectSprot(item) {
      this.editHealthRecond.exerciseType = item.value//运动习惯
      this.editHealthRecond.exerciseName = item.name
      let res = await this.save()
      this.showSprot = false
    }
    ,
    getSmoking() {
      return new Promise((resolve, reject) => {
        getSmokingList().then(res => {
          resolve(res.data)
        })
      })
    }
    ,
    getDrinking() {
      return new Promise((resolve, reject) => {
        getDrinkingList().then(res => {
          resolve(res.data)
        })
      })
    }
    ,
    getSprots() {
      return new Promise((resolve, reject) => {
        getSprotList().then(res => {
          resolve(res.data)
        })
      })
    }
    ,
    getRelation() {
      return new Promise((resolve, reject) => {
        getFriendList().then(res => {
          resolve(res.data)
        })
      })
    }
    ,
    async onSelectRelation(item) {
      this.editHealthRecond.relation = item.value
      this.editHealthRecond.relationName = item.name
      let res = await this.save()
      this.showRelation = false
    }
    ,
    async onSelectJzs(item) {
      this.editHealthRecond.isGeneticHistoryName = item.name
      this.editHealthRecond.isGeneticHistory = item.value
      let res = await this.save()
      this.showJZS = false
    }
    ,
    queryHealthRecord() {
      queryHealthRecord().then(res => {
        // this.$toast.fail(`queryHealthRecord${res.data}`)
        if (res.data) {
          this.editHealthRecond = res.data
          this.editHealthRecond.isGeneticHistoryName = this.editHealthRecond.isGeneticHistory == 1 ? '有' : '无'
          this.editHealthRecond.ysxg = (this.editHealthRecond.dinnerName ? this.editHealthRecond.dinnerName + '/' : '') + (this.editHealthRecond.tasteName ? this.editHealthRecond.tasteName + '/' : '') + (this.editHealthRecond.stapleFoodName ? this.editHealthRecond.stapleFoodName : '')
          console.log('ysxg', this.editHealthRecond.ysxg)
        } else {
          this.$toast.fail(`接口暂未获取到数据${res.data}`)
        }
        // this.healthRecondList = res.data
      })
    }
    ,
    getHealthData() {
      getTestHealthData().then(res => {
        console.log('xxx', res)
        this.threeList = res.data
      })
    }
    ,
    async handleBack() {
      // let res = await this.save()
      // if (res) {
      //   this.$router.go(-1)
      // } else {
      //   this.$toast.success('修改失败')
      // }
      this.$router.push({path: '/my'})
      let message = {
        action: 'showBottom',
        param: {}
      }
      getInfoFromVue.postMessage(JSON.stringify(message))
    }
    ,
    save() {
      // this.$toast.success('进入保存接口')
      console.log('xxxxx', this.editHealthRecond.diseaseName.length)
      if (this.editHealthRecond.diseaseName.length < 2) {
        // this.$toast('疾病名称长度必须为2-50个字符')
        return;
      }
      return new Promise((resolve, reject) => {
        saveHealthRecord(this.editHealthRecond).then(res => {
          resolve(res.data)
        })
      })
    },
    handleShare() {

    }
    ,
    gotoMedical() {
      console.log(this.editHealthRecond)
      this.$router.push(
          {
            path: '/medicalRecords',
            query: {
              imgList: this.editHealthRecond.medicalRecord
            }
          }
      )
    }
    ,
    gotoDietary() {
      let choose = {
        dinnerType: this.editHealthRecond.dinnerType,//每日餐饮
        dinnerName: this.editHealthRecond.dinnerName,
        tasteType: this.editHealthRecond.tasteType,//口味偏好
        tasteName: this.editHealthRecond.tasteName,
        stapleFoodType: this.editHealthRecond.stapleFoodType,//主食偏好
        stapleFoodName: this.editHealthRecond.stapleFoodName,
      }
      this.$router.push(
          {
            path: '/dietaryRecords',
            query: {
              obj: choose
            }
          }
      )
    }
  }
}
</script>

<style scoped lang="less">
.main {
  height: 100vh;
  overflow-y: scroll;
  padding: 15px;
  //background-image: url("../../assets/my/personal.png");
  background-image: url("../../../assets/my/personal.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #ffffff;

  /deep/ .van-action-sheet__name {
    font-size: 20px;
  }

  /deep/ .van-picker-column__item {
    font-size: 20px;
  }

  /deep/ .van-picker__confirm {
    font-size: 20px;
  }

  /deep/ .van-picker__cancel {
    font-size: 20px;
  }

  /deep/ .van-ellipsis {
    font-size: 20px;
  }

  /deep/ .van-cell__value {
    color: #323233;
  }

  .nav {
    //height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .back {
      width: 10px;
      height: 16px;
    }

    .share {
      width: 22px;
      height: 22px;
    }
  }

  .header {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .header-l {
      .num {
        font-size: 23px;
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 33.3px;
        color: rgba(255, 255, 255, 1);
        text-align: left;
        vertical-align: top;
      }

      .name {
        font-size: 17px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;
        color: rgba(255, 255, 255, 1);
        text-align: left;
        vertical-align: top;
      }

      .age {
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 17.38px;
        color: rgba(255, 255, 255, 1);
        text-align: left;
        vertical-align: top;
      }
    }

    .avatar {
      background-repeat: no-repeat;
      background-size: 100%;
      width: 75px;
      height: 75px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #f0f0f0;
      border: 1px solid #fff;
      opacity: 1;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      //background-color: blue;
      //background: url(https://img.js.design/assets/img/650130386283a11de27f9d72.png#38718863d694ca27a56c171da507ec69);
    }
  }

  .standard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    margin-top: 10px;

    .standard-item {
      width: calc((100% - 48px) / 4);
      height: 4px;
      opacity: 1;
      border-radius: 2px;
      border: 0.5px solid rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 4px rgba(255, 255, 255, 0.25);
      position: relative;

      > img {
        width: 20px;
        height: 17px;
        position: absolute;
        bottom: 7px;
        left: 15px;
      }
    }

    .blue {
      background: rgba(38, 149, 209, 1);
    }

    .green {
      background: rgba(0, 191, 115, 1);
    }

    .yello {
      background: rgba(255, 160, 43, 1);
    }

    .red {
      background: rgba(255, 13, 13, 1);
    }
  }

  .three {
    margin-bottom: 18px;
    //height: 240px;
    opacity: 1;
    border-radius: 13px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);

    .title {
      padding: 10px 10px 20px 20px;
      font-size: 20px;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 26.06px;
      color: rgba(0, 0, 0, 1);
      text-align: left;
      vertical-align: top;
      position: relative;

      > img {
        position: absolute;
        bottom: 20px;
        left: 20px;
        width: 101px;
        height: 8px;
        opacity: 0.8;
        background: linear-gradient(90deg, rgba(255, 141, 26, 1) 0%, rgba(255, 141, 26, 0) 100%);
      }

      //background-image: url("../../../assets/my/health-records/head_bgm.png");
      //background-size: 100%;
      //background-repeat: no-repeat;
    }

    .three-item-all {
      /deep/ .van-cell__title {
        font-size: 17px;
        font-weight: 400;
      }

      /deep/ .van-cell__value {
        font-size: 17px;
        font-weight: 400;
      }

      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-start;

      .three-item {
        padding: 0px 0px 10px 0px;
        //border-right: 1px dashed rgba(128, 128, 128, 1);
        width: calc((100%) / 4);
        text-align: center;

        > img {
          height: 30px;
          width: 30px;
        }

        > div {
          font-size: 15px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 17.38px;
          color: rgba(0, 0, 0, 1);
          vertical-align: top;
        }
      }

    }
  }
}
</style>
